<template>
  <div>
    <el-input v-model="input" @change="handlerInput()" placeholder="请输入内容" class="Input" suffix-icon="el-icon-date" prefix-icon="el-icon-search" size="medium"></el-input>
    <div class="index-category">
        <div class="iconfont" v-for="(list, index) in lists" :key='index' >
            <i class="iconfont" :class="list.icon" :style="{background: list.color}"></i>          
            <label>{{list.title}}</label>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
      data() {
          return {
              lists: [
                  {title: '美食', icon: 'iconfenlei', color: '#fa69b9'},
                  {title: '电影', icon: 'iconfenlei', color: '#ecbe35'},
                  {title: '住宿', icon: 'iconfenlei', color: '#49dacf'},
                  {title: '娱乐', icon: 'iconfenlei', color: '#f60'},
                  {title: '外卖', icon: 'iconfenlei', color: '#908cfd'},
                  {title: '打车', icon: 'iconfenlei', color: '#92d85c'},
                  {title: '景点', icon: 'iconfenlei', color: '#f95730'},
                  {title: '旅游', icon: 'iconfenlei', color: '#908cfd'}
              ],
              input: ''
          }
      },
      methods: {
          handlerInput() {
              console.log(this.input)
          }
      }
}
</script>

<style>
.Input {
    position: fixed;
    z-index: 99;
}
.index-category {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 13px;
    background-color: #fff;
    padding: 5px 0;
    border-radius: 7px;
    padding-top: 40px;
}
.index-category .iconfont {
    /* display: inline-block; */
    flex: 25%;
    text-align: center;
    padding: 6px 0;
   /*  flex-direction: column;
    align-items: center; */
}
.index-category .iconfont .iconfenlei {
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: skyblue;
}
.index-category label {
    flex: 1;
    
}
</style>
